<script>
import Ls from '@/utils/storage'
export default {
  created () {
    // 调用API从本地缓存中获取数据
    /*
     * 平台 api 差异的处理方式:  api 方法统一挂载到 mpvue 名称空间, 平台判断通过 mpvuePlatform 特征字符串
     * 微信：mpvue === wx, mpvuePlatform === 'wx'
     * 头条：mpvue === tt, mpvuePlatform === 'tt'
     * 百度：mpvue === swan, mpvuePlatform === 'swan'
     * 支付宝(蚂蚁)：mpvue === my, mpvuePlatform === 'my'
     */

    let logs
    if (mpvuePlatform === 'my') {
      logs = mpvue.getStorageSync({key: 'logs'}).data || []
      logs.unshift(Date.now())
      mpvue.setStorageSync({
        key: 'logs',
        data: logs
      })
    } else {
      logs = mpvue.getStorageSync('logs') || []
      logs.unshift(Date.now())
      mpvue.setStorageSync('logs', logs)
    }
  },
  log () {
    console.log(`log at:${Date.now()}`)
  }
}
</script>

<style lang="less">
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
  background: red;
}
/* this rule will be remove */
* {
  transition: width 2s;
  -moz-transition: width 2s;
  -webkit-transition: width 2s;
  -o-transition: width 2s;
}
// 页面初始加载
.init-loading{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
// 无数据样式
.empty{
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img{
  width: 120px;
  height: 85px;
  display: block;
  }
  .empty-tips{
    font-size: 12px;
    color: #A7A6AB;
    margin-top: 15px;
  }
}
// 底线
.bottom-line{
  width: 100%;
  display: flex;
  justify-content: center !important;
  padding: 20px 0;
  font-size: 12px;
  color: #666;

}
// border-bottom
.border-bottom{
  border-bottom: 0.5px solid #DCDCDC;
}
.border-top{
  border-top: 0.5px solid #DCDCDC;
}
// border
.border{
  border: 0.5px solid #DCDCDC;
}
// 整体页面背景色
.body-bg{
  min-height: 100vh;
  background: #f1f2f7;
}
// 单行文字超市部分省略
.overflow-one{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
// 文字超出俩行省略
.overflow-tow{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
// 上拉加载显示加载状态
.pull-loading{
  width: 100%;
  height: 40px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  // &.active{
  //   height: auto;
  //   overflow: auto;
  //   transition: all 0.5s;
  // }
}
</style>
